<template>
  <el-dialog title="预报确认"
             :visible.sync="dialogForm"
             width="1200px">
    <el-form :inline="true"
             ref="form"
             :model="form"
             class="add-form"
             label-width="80px">
      <h3>基础信息</h3>
      <hr />
      <br />
      <el-row>
        <el-col :span="8"
                class="el-height"><span class="labels">货主:</span>{{form.cargoOwnerName}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">车船号:</span>{{form.transhipNo}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">运输方式:</span>{{form.transportWay | _filterTransportModeType}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">物资发放时间:</span>{{form.startOffDate}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">预计到达时间:</span>{{form.forecastArrivalDate}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">始发站:</span>{{form.startStationName}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">预计总件数:</span>{{form.forecastNum}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">预计总重量（吨）:</span>{{form.forecastWeight}}</el-col>
        <el-col :span="8"
                class="el-height"><span class="labels">备注:</span>{{form.remark}}</el-col>
      </el-row>

      <el-row>
        <el-col :span="3">
          <h3>确报明细 </h3>
        </el-col>
        <el-col :span="3">
          <el-checkbox v-model="checked">是否部分入库</el-checkbox>
        </el-col>
      </el-row>
      <hr />
      <br />
      <div class="sureVos" v-for="(ele,index) in form2.sureVos"
           :key="index">
        <el-button v-show="checked===true"
                   @click="add(ele)">添加</el-button>
        <el-row>
          <el-col :span="8">
            <el-form-item label="入库方式"
                          prop="inWay">
              <el-select v-model="ele.inWay"
                         placeholder="请选择"
                         clearable>
                <el-option v-for="(item,index) in enterList"
                           :key="index"
                           :label="item.name"
                           :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-form-item label="到达时间"
                        prop="arriveTime">
            <el-date-picker v-model="ele.arriveTime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="date"
                            placeholder="选择日期"></el-date-picker>
          </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="到达位置"
                          prop="arrivePosition">
              <auto-search-dic v-model="ele.arrivePosition"
                             @select="v=>ele.arrivePosition=v"
                             @selectName="v=>ele.arrivePosition=v"
                             :name="ele.arrivePosition"
                             code="LOCATION_ARRIVE"></auto-search-dic>
            </el-form-item>
          </el-col>
          <el-col :span="8"
                  v-show="ele.inWay==='ZXDJ' || ele.inWay==='SYDJ'">
            <el-form-item label="目的位置"
                          prop="targetLocation">
              <auto-search-dic v-model="ele.targetLocation"
                             @select="v=>ele.targetLocation=v"
                             @selectName="v=>ele.targetLocation=v"
                             :name="ele.targetLocation"
                             code="LOCATION_TRAGET"></auto-search-dic>
            </el-form-item>
          </el-col>
        </el-row>
        <el-table :data="ele.detailVos"
                  border
                  stripe
                  max-height="550">
          <el-table-column label="序号"
                           type="index"
                           width="50"></el-table-column>
          <el-table-column prop="cargoName"
                           label="品名"
                           min-width="150"></el-table-column>
          <el-table-column prop="normStr"
                           label="规格"
                           min-width="150"></el-table-column>
          <el-table-column prop="material"
                           label="材质"
                           min-width="150"></el-table-column>
          <el-table-column prop="madeBy"
                           label="生产厂家"
                           min-width="150"></el-table-column>
          <el-table-column prop="num"
                           label="预计件数"
                           min-width="150"></el-table-column>
          <el-table-column prop="inNum"
                           label="交接件数"
                           min-width="100">
            <template slot-scope="scope">
              <el-input v-model.number="scope.row.inNum"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button type="primary"
                 @click="submit">确 认</el-button>
      <el-button @click="dialogForm = false">返 回</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getEnumList } from '@/api/enter/arrivalForecast' //入库下拉菜单
import { addForecastConfirm } from '@/api/accept/carry'
import autoSearchDic from '@/components/autocomplete/autoSearchDic'

export default {
  name: 'confirmPredictionForm',
  components:{ autoSearchDic },
  data() {
    return {
      form: {},
      form2: this.clearForm(),
      dialogForm: false,
      enterList: null,
      checked: false,
      show: true,
      show2: false,
      data: []
    }
  },
  mounted() {
    getEnumList(1).then(res => {
      this.enterList = res.data.aaData
    })
  },
  methods: {
    clearForm() {
      return {
        sureVos: []
      }
    },
    //添加入库
    add(ele) {
      this.form2.sureVos.push(JSON.parse(JSON.stringify(ele)))
    },
    //确认
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let sureVosList = this.form2.sureVos
          for (let item of sureVosList) {
            let detailVosList = item.detailVos
            for (let e of detailVosList) {
              item.planNum += e.inNum //计划件数赋值
            }
          }
          addForecastConfirm(this.form.entrustNo, this.form2).then(res => {
            this.$message({ message: '确认成功!', type: 'success' })
            this.dialogForm = false
            this.$emit('load')
          })
        } else {
          this.$message({
            message: '请检查表单',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-height {
  margin: 10px 0;
}

.labels {
  margin-right: 5px;
}
.sureVos {
  margin-top: 10px;

}
</style>
